<template>

    <div>
        <PublicHeader>
           
                <div class="homeheader">
                    <i class="icon-search"></i>
                    <input type="text" placeholder="">
                </div>
                <span class="login">
                    <i class="icon-user-md"></i>登录</span>
                
        </PublicHeader>
        <tabbar></tabbar>
        <div class="mr-content">
            <home-item v-for="(news,index) in newsList" :r="news" :key="index"></home-item>
            <!--<p v-if="error">不好意思,加载失败,请稍后再试...</p>-->
            <div class="clear"></div>
            <div class="loadMore">
                <span @click="loadMore">点击加载更多</span>
            </div>
        </div>
        <backTop></backTop>
    </div>

</template>
<script>
    import PublicHeader from '../components/Header.vue'
    import HomeItem from '../components/HomeItem'
    import backTop from '../components/backTop'
    import tabbar from '../components/tabbar'
    export default {
        data() {
            return {
                newsList: [],
                count: 1
            }
        },
        components: {
            PublicHeader, HomeItem,backTop,tabbar
        },
        created() {
            this.getInfo(this.count)
        },
        methods: {
            getInfo(pages) {
                this.axios.get(`http://www.vue-js.com/api/v1/topics?page=` + pages)
                    .then(data => {
                        console.log(data.data.data)
                        this.error = false
                        this.newsList = this.newsList.concat(data.data.data)
                        // console.log(this)
                    })
                    .catch(err => {

                    })
            },

            loadMore() {
                this.count++
                this.getInfo(this.count)
            }
        }
    }

</script>
<style lang="">
    .login {
        line-height: 44px; 
        font-weight: bold;
        font-size: 20px;
        float: right;
        margin-right: 10px;
    }
    .homeheader {
        display: inline-block;
        width: 200px;
        height: 30px;
        background: #7bd238;
        border-radius: 20px;
    }
    .homeheader:hover {
        background: white
    }
    .homeheader i {
        color: #ccc;
        line-height: 30px;
        margin-left: 5px;
    }
    .homeheader input {
        border: none;
        outline: none;
        background: #7bd238;
    }
    .homeheader input:hover {
        background: white
    }
    
    .mr-content {
        padding: 88px 10px 0 10px;
        overflow: hidden;
    }
    
    .loadMore {
        margin: 10px;
        text-align: center;
    }
    
    .clear {
        clear: both
    }
    
    .loadMore span {
        display: inline-block;
        line-height: 30px;
        padding: 0 20px;
        border-radius: 10px;
        border: 1px solid #000;
        margin-bottom: 40px;
    }
</style>